<template>
  <div>
    <!-- Statistics Cards (similar to your existing cards) -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <template v-slot:header>  
            <div  class="clearfix">
              <strong><span style="color: cornflowerblue">统计条数</span></strong> 
            </div>
          </template>  
          <div class="text item">{{ statCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <template v-slot:header>
            <div  class="clearfix">
              <strong><span style="color: darkseagreen">月药品最高金额</span></strong>
            </div>
          </template>
          <div class="text item">{{ maxMonthlyMedicalExpense }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <template v-slot:header>
            <div  class="clearfix">
              <strong><span style="color: darkgoldenrod">个人月平均就诊天数</span></strong>
            </div>
          </template>
          <div class="text item">{{ averageDaysPerMonth }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <template v-slot:header>
            <div  class="clearfix">
              <strong><span style="color: slategray">累计最长就诊月数</span></strong>
            </div>
          </template>
          <div class="text item">{{ maxMonthlyVisits }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- Chart Display (similar to your existing charts) -->
    <el-card class="box-card">
      <template v-slot:header>
        <div  class="clearfix">
          <span>图表展示</span>
        </div>
      </template>
      <div ref="pieChart" style="width: 100%; height: 400px;"></div>
      <div ref="lineChart" style="width: 100%; height: 400px;"></div>
    </el-card>

    <!-- Data Table with Search, Import, Export, and Pagination -->
    <el-card class="box-card">
      <template v-slot:header>
        <div  class="clearfix">
          <span>数据表格</span>
          <el-button
            @click="handleImport"
            type="primary"
            size="small"
            style="float: right; margin-left: 10px"
            >导入</el-button>
          <el-button
            @click="handleExport"
            type="primary"
            size="small"
            style="float: right"
            >下载</el-button>
        </div>
      </template>
      <el-input v-model="search" placeholder="Search" class="search"></el-input>
      <el-table :data="filteredData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="100"></el-table-column>
        <el-table-column
          prop="monthlyAvgDays"
          label="月平均就诊天数"
        ></el-table-column>
        <el-table-column
          prop="monthlyMaxVisits"
          label="月就诊最高次数"
        ></el-table-column>
        <el-table-column
          prop="totalDrugCost"
          label="药品费自费总金额"
        ></el-table-column>
        <el-table-column
          prop="totalExamCost"
          label="检查费发生总金额"
        ></el-table-column>
        <el-table-column
          prop="nonAccountPayment"
          label="非账户支付金额"
        ></el-table-column>
        <el-table-column
          prop="basicFundPayment"
          label="基本统筹基金支付金额"
        ></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="filteredData.length"
        :page-size="pageSize"
        @current-change="handlePageChange"
        style="margin-top: 10px;">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
// import { tableData } from '@/api/fromdata';

export default {
  data() {
    return {
      statCount: 0,
      maxMonthlyMedicalExpense: 0,
      averageDaysPerMonth: 0,
      maxMonthlyVisits: 0,
      pieData: [],
      lineData: [],
      tableData:[],
      search: '',
      currentPage: 1,
      pageSize: 10,
    };
  },
  computed: {
    filteredData() {
      if (this.search) {
        return this.tableData.filter(row => Object.values(row).some(val => val.toString().includes(this.search)));
      } else {
        return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
      }
    }
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      fetch('http://127.0.0.1:5000/api/data')
        .then(response => response.json())
        .then(data => {
          this.statCount = data.stat_count;
          this.maxMonthlyMedicalExpense = data.max_monthly_medical_expense;
          this.averageDaysPerMonth = data.average_days_per_month;
          this.maxMonthlyVisits = data.max_monthly_visits;
          this.pieData = data.pie_data;
          this.lineData = data.line_data;
          this.tableData = data.table_data;
          const lineChartData = JSON.parse(data.line_data);  
          this.xAxisData = lineChartData.xAxis; // 提取 xAxis 数据  
          this.yAxisData = lineChartData.yAxis; // 提取 yAxis 数据 
          this.initCharts();
        });
    },
    initCharts() {
      // Initialize pie chart
      var pieChart = echarts.init(this.$refs.pieChart);
      var pieOption = {
        series: [{
          type: 'pie',
          data: this.pieData.map(item => ({  
            value: item.value,  
            name: item.label  
          })),  
        }]
      };
      pieChart.setOption(pieOption);

      // Initialize line chart
      var lineChart = echarts.init(this.$refs.lineChart);  
      var lineOption = {  
        xAxis: {  
          type: 'category',  
          data: this.xAxisData // 使用提取的 xAxis 数据  
        },  
        yAxis: {  
          type: 'value'  
        },  
        series: [{  
          type: 'line',  
          data: this.yAxisData // 注意：这里应该是 yAxis 数据，但通常 line 图的 series.data 是 y 值数组  
          // 如果后端返回的数据结构是 {xAxis: [...], yAxis: [y1, y2, ...]}，则可能需要调整  
          // 假设后端实际上返回的是 {xAxis: [...], seriesData: [y1, y2, ...]}，则应该使用 seriesData  
        }]  
      }
      lineChart.setOption(lineOption);
    },
    handleImport() {
      // Logic for importing data
    },
    handleExport() {
      // Logic for exporting data
    },
    handlePageChange(page) {
      this.currentPage = page;
    }
  }
};
</script>

<style scoped>
.el-card {
  margin-bottom: 20px;
}

.text.item {
  font-size: 24px;
  text-align: center;
  line-height: 50px;
}
.search {
  margin-bottom: 10px;
  width: 200px;
}

</style>
